<template>
  <div class="_mbbox boxgap">
    <div class="nbox1">
      <div class="slgap">
        <n-button
          @click="val.x2type = 'atk'"
          :type="val.x2type == 'atk' ? 'warning' : 'default'"
          >攻击</n-button
        >

        <n-button
          @click="val.x2type = 'skill'"
          :type="val.x2type == 'skill' ? 'warning' : 'default'"
          >技伤</n-button
        >

        <n-button
          @click="val.x2type = 'chc'"
          :type="val.x2type == 'chc' ? 'warning' : 'default'"
          >暴率</n-button
        >
        <n-button
          @click="val.x2type = 'chr'"
          :type="val.x2type == 'chr' ? 'warning' : 'default'"
          >暴抗</n-button
        >
        <n-button
          @click="val.x2type = 'hp'"
          :type="val.x2type == 'hp' ? 'warning' : 'default'"
          >生命</n-button
        >
        <n-button
          @click="val.x2type = 'heal'"
          :type="val.x2type == 'heal' ? 'warning' : 'default'"
          >恢复</n-button
        >
        <n-button
          @click="val.x2type = null"
          :type="val.x2type == null ? 'warning' : 'default'"
          >所有</n-button
        >
      </div>

      <template v-if="val.x2type == null">
        <template v-for="item in val.wp" v-if="val.x2type == null">
          <div>
            <div class="mintage_box">
              <n-h3>{{ item.name }} {{ item.rd }}</n-h3>

              <div class="roleboxgap">
                <template v-for="item2 in item.data">
                  <div class="mintage_ava">
                    <img class="_ava_pc" :src="cfg.function.ava(item2.icon)" />
                    <img
                      class="mintage_wp_pc"
                      :src="cfg.wpicon(item2.name, item2.level)"
                    />
                  </div>
                </template>
              </div>
            </div>
          </div>
        </template>
      </template>

      <template v-if="val.x2type != null">
        <div>
          <div class="roleboxgap">
            <template v-for="item in val.hero">
              <template v-if="item?.zw_1?.ky == val.x2type">
                <n-scrollbar x-scrollable trigger="none">
                  <div class="mintage_ava">
                    <img class="_ava_pc" :src="$cfg.function.ava(item.icon)" />
                    <template v-if="item?.zw_1?.ky == val.x2type">
                      <img
                        class="mintage_wp_pc"
                        :src="cfg.wpicon(item?.zw_1?.name, item.star)"
                      />
                    </template>
                    <template v-if="item?.zw_2?.ky == val.x2type"
                      ><img
                        class="mintage_wp_pc"
                        :src="cfg.wpicon(item?.zw_2?.name, item.star)"
                    /></template>
                  </div>
                </n-scrollbar>
              </template>
            </template>
          </div>
        </div>
      </template>
      <n-collapse :size="cfg.sizebtn">
        <n-collapse-item title="刻印说明" name="1">
          <n-alert
            >刻印需要使用满破专武，刻印突破材料需要绿锤或专武 <br />
            - 首次突破固定获得 攻击15% + 生命15% + 固定词条随机数值属性 <br />
            - 第2-4次可以投喂强化锤、装备提升强化值（消耗几乎可以忽略）
          </n-alert>
        </n-collapse-item>
        <n-collapse-item title="刻印概率表" name="2">
          <div>
            <n-table :bordered="false" :single-line="false">
              <thead>
                <tr>
                  <th>突破次数</th>
                  <th>15攻</th>
                  <th>12攻</th>
                  <th>9攻</th>
                  <th>6攻</th>
                  <th>3攻</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>第一次[无强化值]</td>
                  <td>2.5%</td>
                  <td>5.0%</td>
                  <td>20%</td>
                  <td>35%</td>
                  <td>37.5%</td>
                </tr>
                <tr>
                  <td>第二次[满强化值]</td>
                  <td>25.5%</td>
                  <td>26.0%</td>
                  <td>14.0%</td>
                  <td>16.0%</td>
                  <td>18.5%</td>
                </tr>
                <tr>
                  <td>第三次[满强化值]</td>
                  <td>30.5%</td>
                  <td>31.0%</td>
                  <td>12.0%</td>
                  <td>13.0%</td>
                  <td>13.5%</td>
                </tr>
                <tr>
                  <td>第四次[满强化值]</td>
                  <td>35.5%</td>
                  <td>36.0%</td>
                  <td>10.0%</td>
                  <td>10.0%</td>
                  <td>8.5%</td>
                </tr>
                <tr>
                  <td>第五次[无强化值]</td>
                  <td>100%</td>
                  <td>0%</td>
                  <td>0%</td>
                  <td>0%</td>
                  <td>0%</td>
                </tr>
              </tbody>
            </n-table>
          </div>
        </n-collapse-item>
      </n-collapse>
    </div>
  </div>
</template>
<style scoped>
.n-h {
  margin-top: 0.3em;
}
._kybox {
  margin-bottom: 12px;
  background: var(--nbox-bg);
  padding: 12px;
  border-radius: 0.5em;
}
.gt_wddiv2_pc {
  background-color: #495170;
  padding: 10px;
  padding-left: 10px;
  text-shadow: 0 0 3px #000;
  margin-bottom: 6px;
}
.gt_wddiv2_m {
  background-color: #495170;
  padding: 5px;
  font-size: 0.85em;
  text-shadow: 0 0 3px #000;
  padding-left: 8px;
  margin-bottom: 6px;
}
._ava_pc {
  max-width: 40px;
  max-height: 40px;
  border-radius: 5px;
  border: solid 2px #8d8072;
  background-color: #31363d;
}
._ava_m {
  max-width: 37px;
  max-height: 37px;
  border-radius: 5px;
  border: solid 2px #8d8072;
  background-color: #31363d;
}
.mintage_wp_pc {
  max-height: 44px;
  background-image: linear-gradient(
    to bottom,
    #42529c 0%,
    #715592 50%,
    #87568d 85%,
    #e95b94 100%
  );
  border-radius: 3px;
  padding-left: 2px;
  padding-right: 2px;
}
.mintage_wp_m {
  max-height: 40px;
  background-image: linear-gradient(
    to bottom,
    #42529c 0%,
    #715592 50%,
    #87568d 85%,
    #e95b94 100%
  );
  border-radius: 3px;
  padding-left: 2px;
  padding-right: 2px;
}
.slgap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  justify-content: center;
  gap: 8px 8px;
  justify-items: stretch;
  align-items: center;
}
.slgap button:last-child {
  grid-column: span 1;
}
.roleboxgap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  justify-content: center;
  gap: 8px 8px;
  justify-items: stretch;
  align-items: center;
}
.mintage_ava {
  border-radius: 5px;
}
@media (max-width: 500px) {
  .slgap {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 428px) {
  .slgap {
    font-size: var(--def-14px);
  }
  .slgap button:last-child {
    grid-column: span 2;
  }
  .roleboxgap {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5vw;
  }
  ._ava_pc {
    width: var(--def-rolepx-small);
    height: var(--def-rolepx-small);
    border: solid 0.5vw #8d8072;
  }
  .mintage_wp_pc {
    width: var(--def-rolepx);
    height: var(--def-rolepx);
    border-radius: 3px;
    padding-left: 0.3vw;
    padding-right: 0.3vw;
  }
}
</style>
<script>
import { getrole } from "@/cfg/function.js";
import { cfg } from "@/cfg/cfg.js";

export default defineComponent({
  setup() {
    let val = reactive({
      lc: 0,
      hero: [],
      wp: {
        heal: {
          name: "恢复能力",
          rd: "(3.0%-15.0%)",
          rdn: "恢复能力",
          data: [],
        },
        hp: {
          name: "生命值",
          rd: "(3.0%-15.0%)",
          rdn: "生命",
          data: [],
        },
        chr: {
          name: "暴击抗性",
          rd: "(2.0%-10.0%)",
          rdn: "暴击抗性",
          data: [],
        },
        chc: {
          name: "暴击率",
          rd: "(2.0%-10.0%)",
          rdn: "暴击率",
          data: [],
        },
        skill: {
          name: "技能伤害",
          rd: "(9.0%-45.0%)",
          rdn: "技能伤害值",
          data: [],
        },
        atk: {
          name: "攻击",
          rd: "(3.0%-15.0%)",
          rdn: "攻击",
          data: [],
        },
      },
      click: {},
      cache: {},
    });

    let ct = reactive({});

    onMounted(async () => {
      await getrole(true, false, "all");
      val.hero = cfg.role.slice();
      val.hero.forEach((item) => {
        if (item?.zw_1 != null) {
          val.wp[item.zw_1.ky]?.data.push({
            name: item.zw_1.name,
            level: parseInt(item.star),
            icon: item.icon,
          });
        }
        if (item?.zw_2 != null) {
          val.wp[item.zw_2.ky]?.data.push({
            name: item.zw_2.name,
            level: parseInt(item.star),
            icon: item.icon,
          });
        }
      });
    });

    return {
      val,
      ct,
      cfg,
    };
  },
});
</script>
